<template>
  <div class="dashboard-container">
    <!-- 搜索表单 -->
    <!-- 搜索表单 -->
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="between">
          <el-col :span="22">
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
              <el-form-item>
                <el-input v-model="form.username" placeholder="管理员账号" />
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.email" placeholder="管理员邮箱" />
              </el-form-item>
              <el-form-item>
                <el-select v-model="form.status" placeholder="显示状态">
                  <el-option label="全部" />
                  <el-option label="启用" value="1" />
                  <el-option label="禁用" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <template>
                  <el-button
                    ref="search"
                    type="primary"
                    size="small"
                    @click="search(form)"
                  >搜索</el-button>
                </template>
                <el-button size="small" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="1">
            <el-button
              id="create"
              type="primary"
              size="medium "
              @click="add()"
            >创建用户</el-button>
          </el-col>
        </el-row>

        <!-- 搜索表单 -->
        <!-- 搜索表单 -->

        <!-- 表格 -->
        <!-- 表格 -->
        <div class="bottom">
          <el-table stripe border :data="list">
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column label="管理员ID" prop="id" align="center" />
            <el-table-column prop="username" label="管理员姓名" align="center" />
            <el-table-column
              prop="phone"
              label="手机号"
              align="center"
              width="180"
            />
            <!-- src="http://122.51.249.55:7005/admin/index/upload/image/2021/04/1618146157124.jpg" -->
            <el-table-column label="管理员邮箱" prop="email" align="center" />
            <el-table-column prop="" label="管理员头像" align="center">
              <template slot-scope="{row}">
                <img
                  v-imageerror="defaultimg"
                  class="size"
                  :src="`http://122.51.249.55:7005/${row.avatar}`"
                  alt=""
                >
              </template>
            </el-table-column>

            <el-table-column label="管理员角色" align="center">
              <template slot-scope="{row}">
                <el-tag v-for="item in row.roles_names" :key="item" type="success">{{ item }}&nbsp;</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="created_at"
              label="添加时间"
              width="120"
            />
            <el-table-column label="状态" align="center">
              <template slot-scope="{ row }">
                <el-switch
                  v-model="row.status"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="是"
                  inactive-text="否"
                  @change="switchfn(row.id,row.status)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="edit(row.id)"
                />
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="del(row.id)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 表格 -->
        <!-- 表格 -->

        <!-- 分页器 -->
        <!-- 分页器 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            background
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            :page-sizes="[10, 20, 30]"
            layout="prev, pager, next,sizes"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </el-row>
        <!-- 分页器 -->
        <!-- 分页器 -->
      </el-card>
    </div>

    <!-- 弹出框 -->
    <!-- 弹出框 -->
    <div class="dialog">
      <el-dialog
        :title="dialogform.id ? '修改管理员' : '添加管理员'"
        :visible="subjectdialog"
        @close="dialogcnacel"
      >
        <el-form ref="form" :model="dialogform" label-width="50px" style="widtt:80%">
          <el-row>
            <el-col :span="12">
              <el-form-item label="管理员名称" label-width="30%">
                <el-input v-model="dialogform.username" placeholder="请输入用户名" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理员邮箱" label-width="30%">
                <el-input v-model="dialogform.email" placeholder="请输入用邮箱" style="width:80%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="管理员密码" label-width="30%">
                <el-input v-model="dialogform.password" placeholder="请输入密码" style="width:80%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理员手机" label-width="30%">
                <el-input v-model="dialogform.phone" placeholder="请输入手机" style="width:80%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- switch滑块 -->
            <el-col :span="12">
              <el-form-item label="管理员状态" label-width="30%">
                <el-switch
                  v-model="dialogform.status"
                  active-text="禁用"
                  inactive-text="启用"
                  :active-value="1"
                  :inactive-value="2"
                />
              </el-form-item>
            </el-col>

            <!-- switch滑块end -->
            <!-- 上传图片 -->

            <el-col :span="12">
              <el-form-item label="管理员头像" label-width="30%">
                <el-button size="small" type="success" icon="el-icon-upload" @click="choesPhoto">选择</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 上传图片end -->

          <!-- 多选按钮 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="管理员角色" label-width="15%">

                <el-checkbox-group v-model="dialogform.roleid_list">
                  <el-checkbox v-for="item in rolelist" :key="item.id" :label="item.id">{{ item.role_name }}</el-checkbox>
                </el-checkbox-group>

              </el-form-item>
            </el-col>
          </el-row>

          <!-- 多选按钮end -->

        </el-form>
        <!-- footer按钮 -->
        <template v-slot:footer>
          <el-row type="flex" justify="end">
            <el-col :span="6">
              <el-button size="medium" @click="dialogcnacel">取消</el-button>
              <el-button size="medium" type="primary" @click="dialogOK()">确定</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框 -->
    <!-- 弹出框 -->

    <!-- 图片的单独显示框 -->
    <!-- 图片的单独显示框 -->
    <el-dialog v-if="picdialog" title="上传图片" :visible="picdialog" @close="picclose">
      <el-upload
        :file-list="fileList"
        action="http://122.51.249.55:7005/admin/index/upload?mode=base64&type=image"
        name="image"
        :auto-upload="false"
        :headers="mytoken"
        :on-change="getfile"
        list-type="picture-card"
        :http-request="upload"
      ><i5
        class="el-icon-plus"
      /></el-upload>
      <el-button size="small" @click="picclose">取消</el-button>
      <el-button size="small" type="primary" @click="upload">上传</el-button>
    </el-dialog>
    <!-- 图片的单独显示框 -->
    <!-- 图片的单独显示框 -->
  </div>
</template>

<script>

import { getUserList, deleteuser, adduser, getusercheckbox, getsimpleuser, edituser, pic, switchuser } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  name: 'Userr',
  data() {
    return {
      defaultimg: require('@/assets/images/default-icon.png'),
      file: {
        url: ''
      },
      picdialog: false,
      mytoken: { Authorization: null },
      form: {
        username: '',
        status: '',
        email: '',
        limit: 10,
        page: 1
      },
      dialogform: {
        avatar: '',
        email: '',
        password: '',
        phone: '',
        roleid_list: [],
        status: 1,
        username: '',
        id: ''
      },
      val: '',
      value: true,
      subjectdialog: false,
      formLabelWidth: 80,
      list: [],
      rolelist: [],
      checkList: [],
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
      img: ''
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.mytoken.Authorization = this.token
    this.getUserList()
    this.getusercheckboxfn()
  },
  mounted() {
    this.getpush()
  },
  methods: {
    async switchfn(id, status) {
      // console.log(id, status)
      await switchuser({ id: id, status: status })
      this.getUserList()
      this.$message.success('切换成功')
      // console.log(res)
    },
    picclose() {
      this.picdialog = false
    },
    async  upload() {
      const res = await pic({ file: this.file.url, filename: this.file.name })
      // console.log(res)
      this.dialogform.avatar = res.data.url
      this.picdialog=false
      this.$message.success('上传成功')
    },
    async  getusercheckboxfn() {
      const res = await getusercheckbox()
      this.rolelist = res.data.list
      // console.log(this.rolelist)
    },
    // 删除功能
    async del(id) {
      this.fileList = null
      await this.$confirm('您确定删除吗')
      await deleteuser(id)
      this.$message.success('删除成功')
      this.getDirectoryList()
    },
    // 获取列表
    async getUserList() {
      const res = await getUserList(this.page)
      // console.log(res)
      this.list = res.data.list
      this.page.total = res.data.total
    },
    add() {
      this.subjectdialog = true
    },
    dialogcnacel() {
      this.dialogform = {
        avatar: '',
        email: '',
        password: '',
        phone: '',
        roleid_list: [],
        status: 1,
        username: '',
        id: ''
      }
      this.subjectdialog = false
    },
    // 获取单个进行数据回显
    async edit(id) {
      this.subjectdialog = true
      const res = await getsimpleuser(id)
      // console.log(res)
      this.dialogform = res.data
    },
    // 弹框确认事件
    async dialogOK() {
      if (!this.dialogform.id) {
        // console.log('添加')
        // console.log()
        await adduser(this.dialogform)
      } else {
      // 假如没有值的话，就是添加
        // console.log('修改')
        // console.log(val)
        await edituser(this.dialogform)
      }
      this.getUserList()
      this.$message.success('操作成功')
      this.dialogcnacel()
    // 编辑功能是先获取，再修改，所以先获取id 用 get ；之后使用put
    },
    // 图片上传回调
    onSuccess(response, file, fileList) {
      // console.log(response)
      this.dialogform.directory_icon = response.data.url
    },
    // 换页
    changePage(newPage) {
      this.page.page = newPage
      this.getUserList()
    },
    // 改每页的容量
    changeSize(newPage) {
      this.page.limit = newPage
      this.getUserList()
    },
    // 查询
    async search(val) {
      const res = await getUserList(val)
      // console.log(res)
      this.list = res.data.list
      this.page.total = res.data.total
    },
    // 重置按钮
    reset() {
      this.form = {
        directory_name: '',
        subject_id: '',
        is_show: '',
        thelist: '',
        limit: 10,
        page: 1
      }
      this.getUserList()
    },
    // 上传图片按钮
    choesPhoto() {
      this.picdialog = true
    },
    getfile(file, fileList) { // 选取图片的时候把图片转成base64格式
      this.file = file
      // console.log(file)
      this.getBase64(file.raw).then(res => {
        this.file.url = res
        // console.log(res)
      })
    },
    getBase64(file) { // 将图片转成base64格式
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    }

  }}
</script>

<style scoped>
.top {
  margin-top: 20px;
}
.create {
  float: right;
  margin-left: 50px !important;
}
.size{
  width: 80px;
  height: 80px;
}
</style>
